<template>
  <div class="order">
    <nav-bar title="订单详情"></nav-bar>

    <div class="user-info" v-if="isShow" @click="toAddress">
      <p class="user">{{ address.name }}</p>
      <p class="address">{{ address.address }}</p>
      <p class="address-detail">{{ address.address_detail }}</p>
    </div>

    <ul class="price-list" v-if="isShow">
      <li class="item">
        <p class="left">商品合计</p>
        <p class="right">￥{{ allPrise }}</p>
      </li>
      <li class="item">
        <p class="left">运费</p>
        <p class="right">免运费</p>
      </li>
      <li class="item">
        <p class="left">优惠券</p>
        <p class="right">暂无</p>
      </li>
    </ul>

    <ul class="goods-list">
      <li class="item" v-for="item in goodsList" :key="item.id">
        <div class="cell-left">
          <div class="img-holder">
            <img :src="item.list_pic_url" alt="" />
          </div>
          <div class="text-holder">
            <p class="name">{{ item.goods_name }}</p>
            <p class="price">￥{{ item.retail_price }}</p>
          </div>
          <div class="count-holder">
            <p>x{{ item.number }}</p>
          </div>
        </div>
      </li>
    </ul>

    <div class="fixed-bottom">
      <div class="left-box">
        <p class="buy-price">实付： ￥{{ allPrise }}</p>
      </div>
      <div class="right-box">
        <p class="buy-btn" @click="payFor">支付</p>
      </div>
    </div>
  </div>
</template>

<script>
import { getOrderInfo } from "@/api/pages/order";
import NavBar from "@/components/common/nav-bar";
export default {
  data() {
    return {
      isShow: false,
      allPrise: 0,
      address: {},
      goodsList: [],
    };
  },
  methods: {
    getData() {
      let addressId = this.$store.state.addressId;

      let openId = localStorage.getItem("openId");
      getOrderInfo({ openId, addressId }).then((res) => {
        console.log(res);
        this.allPrise = res.allPrise;
        this.address = res.address;
        this.goodsList = res.goodsList;
        this.isShow = true;
      });
    },

    // 地址选择
    toAddress() {
      this.$router.push("/pages/addressList");
    },

    // 支付(未开发)
    payFor() {
      this.$toast.fail("支付功能暂未开放");
    },
  },
  created() {
    this.getData();
  },
  components: {
    "nav-bar": NavBar,
  },
};
</script>

<style lang="scss" scoped>
.order {
  .user-info {
    margin-top: 2px;
    padding-top: 25px;
    padding-left: 25px;
    box-sizing: border-box;
    width: 100%;
    height: 120px;
    background: url("../../../assets/images/address-bg-bd.png") repeat-x #fff 0
      0;
    background-size: 17%;
    .user {
      margin-top: 12px;
    }
    .address {
      margin-top: 12px;
      color: #666;
    }
    .address-detail {
      color: #666;
    }
  }

  .price-list {
    box-sizing: border-box;
    margin-top: 10px;
    padding: 0 15px;
    width: 100%;
    background-color: #fff;
    .item {
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 15px 0;
      height: 45px;
      border-bottom: 1px solid #d9d9d9;
    }
    .item:nth-last-child(1) {
      border-bottom: 0px;
    }
  }

  .goods-list {
    background-color: #fff;
    padding: 0 10px;
    .item {
      margin-top: 10px;
      .cell-left {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100px;
        padding: 10px;
        border-bottom: 0.01333rem solid #f4f4f4;
        background-color: #fff;
        .img-holder {
          background-color: #f4f4f4;
          img {
            height: 62px;
            width: 62px;
          }
        }
        .text-holder {
          height: 76px;
          width: 220px;
          p {
            margin: 16px 8px;
          }
        }
      }
    }
  }

  .fixed-bottom {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 0px;
    left: 0;
    padding-left: 10px;
    height: 50px;
    width: 100%;
    background-color: #fff;
    .right-box {
      display: flex;
      align-self: center;
      height: 100%;
      text-align: center;
      line-height: 50px;
      .buy-price {
        width: 50px;
        color: #b4282d;
      }
      .buy-btn {
        height: 100%;
        color: #fff;
        background-color: #b4282d;
        width: 100px;
      }
    }
  }
}
</style>